<template>
  <div style="background-color:#f5f5f5;">
    <div class="myCenter">
      <div class="tabItem">
        <div class="Advertisement">
          <div style="padding:30px 0 0 15px;">
            <p><span style="font-weight: bold;color: #333333;font-size: 20px;">刊登租房广告</span>
              <span>(<span style="color: red">*</span>为必填项)</span>
            </p>
          </div>
          <!--              步骤条-->
          <div class="steps">
            <el-steps :active="1" align-center finish-status="success" process-status="finish">
              <el-step title="填写资料" description=""></el-step>
              <el-step title="确认刊登方案" description=""></el-step>
              <el-step title="缴费" description=""></el-step>
              <el-step title="完成刊登" description=""></el-step>
            </el-steps>
          </div>
        </div>
        <!-- 物业用途  物业描述   联络资料-->
        <div class="propertyUse">
          <div>物业用途</div>
          <div>物业描述</div>
          <div>联络资料</div>
        </div>
        <!--        物业用途-->
        <div class="propertyUseItem">
          <span>物业用途</span>
        </div>
        <div style="margin-top: 30px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="物业用途" prop="name">
              <el-radio-group v-model="ruleForm.resource" style="margin-top: 15px">
                <el-radio label="住宅"></el-radio>
                <el-radio label="工厂大夏"></el-radio>
                <el-radio label="商铺"></el-radio>
                <el-radio label="单位"></el-radio>
                <el-radio label="土地"></el-radio>
                <el-radio label="海外物业"></el-radio>
                <br/>
                <el-radio label="屋菀" style="padding-top: 15px"></el-radio>
                <el-radio label="单栋式大夏"></el-radio>
                <el-radio label="村屋"></el-radio>
                <el-radio label="唐楼"></el-radio>
                <el-radio label="居屋/工屋"></el-radio>
                <el-radio label="洋房/独立屋"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="物业编号">
              <el-input v-model="form.name" style="width: 500px" placeholder="填写物业编号"></el-input>
            </el-form-item>
            <el-form-item label="屋苑/楼盘">
              <!--                  <el-input v-model="form.name" style="width: 500px" placeholder="请填写屋菀关键词"></el-input>-->
              <el-select style="width: 500px" v-model="form.region" placeholder="请填写屋菀关键词">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
              <span style="color: red;cursor: pointer">直接填写地址</span>
            </el-form-item>
            <el-form-item label="屋菀/楼盘">
              <div style="width: 500px;height: 300px;border: 1px solid #cccccc;">地图</div>
              <div>
                <span style="color: red;">修改地址</span>
                <span style="color: #999999;font-size: 12px;">tip如调整座数和地图定位位置，请点击地图对应位置</span>
                <span><input placeholder="请填写地址或大夏名" style="width: 150px;height: 20px"></input>
                      <el-button
                        style="color: #ffffff;background-color:#ad2022;height: 30px;line-height: 0">搜寻</el-button>
                    </span>
                <span style="font-size: 12px;color: #999999;">位置已更新，</span>
                <span style="color: red;">还原最初位置</span>
              </div>
            </el-form-item>
            <el-form-item label="楼龄/年">
              <el-input v-model="form.name" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="单位资料" prop="name">
              <div class="unitData">
                <div class="inpItemOne">
                  <input type="text">房
                </div>
                <div class="inpItemOne inpItemTwo">
                  <input type="text">厅
                </div>
                <div class="inpItemOne inpItemThree">
                  <el-checkbox v-model="checked">开放式</el-checkbox>
                </div>
                <div class="inpItemOne inpItemTwo inpItemFour">
                  使用<input type="text">平方积
                </div>
                <div class="inpItemOne inpItemTwo inpItemFour">
                  建筑<input type="text">平方积
                </div>
              </div>
              <div style="width: 85%;">
                <span style="font-weight: bold;font-size: 10px">请填写数字，不能为0</span>
                <span style="float: right;"><el-checkbox v-model="checked">
                      <span style="font-weight: bold;font-size: 10px;">面积未核算</span></el-checkbox></span>
              </div>
            </el-form-item>
            <el-form-item label="屋菀/楼盘">
              <el-input v-model="form.name" style="width: 500px" placeholder="请输入5字的自定标签"></el-input>
              <div class="Label">
                <span style="color: #999999">热门标签</span>
                <span class="Labelitem" style="background-color:#f2eade;color: #d6b988;">豪华装修</span>
                <span class="Labelitem" style="background-color:#fbebec; color: #c07f85;">设备齐全</span>
                <span class="Labelitem" style="color: #a2bbd4;">钥匙</span>
              </div>
            </el-form-item>
            <el-form-item label="出售楼层">
              <el-select v-model="form.region" placeholder="请输入楼层">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出售楼层">
              <el-select v-model="form.region" placeholder="南">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
              <el-select v-model="form.region" placeholder="一般装修">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="景观">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="海景" name="type"></el-checkbox>
                <el-checkbox label="山景" name="type"></el-checkbox>
                <el-checkbox label="远景" name="type"></el-checkbox>
                <el-checkbox label="开场" name="type"></el-checkbox>
                <el-checkbox label="城市景" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="提供设施">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="电视" name="type"></el-checkbox>
                <el-checkbox label="冷气" name="type"></el-checkbox>
                <el-checkbox label="洗衣液" name="type"></el-checkbox>
                <el-checkbox label="雪散 name=" type
                "></el-checkbox>
                <el-checkbox label="床" name="type"></el-checkbox>
                <el-checkbox label="餐桌" name="type"></el-checkbox>
                <el-checkbox label="书画" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="屋菀设施">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="便利店" name="type"></el-checkbox>
                <el-checkbox label="便利店" name="type"></el-checkbox>
                <el-checkbox label="超级市场" name="type"></el-checkbox>
                <el-checkbox label="游泳池 name=" type
                "></el-checkbox>
                <el-checkbox label="儿童乐园" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
        <!--            租賃信息-->
        <div class="leasingInformation">
          <div class="propertyUseItem">
            <span>租賃信息</span>
          </div>
          <div class="inputItem">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="租金" prop="name">
                <div class="inpItemOne ">
                  <div>
                    <input type="text" style="width: 100px;height: 30px"><span>元/月</span>
                  </div>
                  <div>
                    <el-form-item label="按金">
                      <el-select v-model="form.region" style="width: 150px" placeholder="两个月租金">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="生约">
                      <el-select v-model="form.region" style="width: 150px" placeholder="12个月">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="死约">
                      <el-select v-model="form.region" style="width: 150px" placeholder="12个月">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="租金包含">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="差向" name="type"></el-checkbox>
                  <el-checkbox label="地租/地税" name="type"></el-checkbox>
                  <el-checkbox label="管理费" name="type"></el-checkbox>
                  <el-checkbox label="水费" name="type"></el-checkbox>
                  <el-checkbox label="电费" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="管理费">
                <el-input v-model="form.name" style="width: 200px"></el-input>
                <span>元/月</span>
              </el-form-item>
              <el-form-item label="可起租日">
                <el-date-picker type="date" placeholder="选择日期" style="width: 200px;"></el-date-picker>
              </el-form-item>
              <el-form-item label="出售楼层">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="可明火煮食" value="shanghai"></el-option>
                  <el-option label="可明火煮食" value="beijing"></el-option>
                </el-select>
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="可饲养宠物" value="shanghai"></el-option>
                  <el-option label="可饲养宠物" value="beijing"></el-option>
                </el-select>
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="租客不限性别" value="shanghai"></el-option>
                  <el-option label="租客不限性别" value="beijing"></el-option>
                </el-select>
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="不可分租" value="shanghai"></el-option>
                  <el-option label="不可分租" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="广告标题" prop="name">
                <el-input v-model="form.name" style="width: 500px" placeholder="如:周怀大夏设施完善"></el-input>
              </el-form-item>
              <el-form-item label="特色描述">
                <div style="width: 95%;height: 350px;">
                  <!-- 富文本编辑框 -->
                  <div id="websiteEditorElem" style="height:300px;background: #ffffff;"></div>
                </div>
              </el-form-item>
              <el-form-item label="上传放盘图片" label-width="200" prop="name">
                <p style="color: #999999;">一张好的图片 能影响您的成效,如现在没有照片，可之后在会员中心修改放盘内加回</p>
                <div class="uploadImg">
                  <div>
                    <!--                      <el-button class="btn">选择档案</el-button>-->
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="3"
                      :on-exceed="handleExceed"
                      :file-list="fileList">
                      <el-button class="btn">选择档案</el-button>
                      <p>未选择任何档案</p>
                    </el-upload>


                  </div>
                  <div class="uploadImgItemTwo">
                    <!--                      <img src="../../../static/myCenter/cimg06.jpg" width="120" height="120" alt="">-->
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <img src="../../../static/myCenter/cimg06.jpg" width="120" height="120" alt="">
                    </el-upload>
                    <span style="display: inline-block;color: #a9a9a9;">图片描述</span>
                  </div>
                  <div class="uploadImgItemThree">
                    <el-button class="btn" style="width: 150px">移除</el-button>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!--            联络资料-->
        <div class="ContactInformation">
          <div class="propertyUseItem" style="margin-left: 15px">
            <span>联络资料</span>
          </div>
          <div style="margin-top: 30px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="身份" prop="name">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="业主"></el-radio>
                  <el-radio label="香港代理人"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="联络人" prop="name">
                <p style="color: #999999;">请输入联络人</p>
                <div class="userInfos">
                  <div class="Infobox">
                    <div><img src="../../../static/myCenter/cimg07.jpg" width="100" alt=""></div>
                    <div style="margin-left: 15px;">
                      <p>姓名:李小小</p>
                      <p>电话: 41566441125</p>
                      <p>手机: 13707879376</p>

                      <el-button style="background-color:#f08181;color: #ffffff;"  @click="dialogVisible = true">编辑</el-button>
                      <el-button style="background-color:#cccccc;">删除</el-button>
                    </div>

                  </div>
                  <div class="Infobox">
                    <div @click="dialogVisible = true"><img src="../../../static/myCenter/cimg08.jpg" width="150" alt=""></div>
                    <div style="margin-left: 15px;text-align: center;line-height: 150px;">
                      <p>新建联系人</p>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="bottomFooter">
          <router-link to="/payProgramme"><el-button class="footerBtn">下一步</el-button></router-link>
          <span style="color: #999999;font-weight: bold;">
                无法正常刊登?请联系客服电话: 2197 4910或<span style="color: red">[线上留言]</span>
              </span>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css';
  import E from 'wangeditor';

  export default {
    name: "advertisement",
    data() {
      return {
        dialogVisible: false,
        phoneEditor: '',
        name: '',
        labelPosition: 'left',
        activeName1: 'second',
        tabPosition: 'left',
        activeName: 'first',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        tableData: [{}, {}, {}, {}],
        tableData1: [{},],

        currentPage4: 4,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        ruleForm: {
          name: '',
          desc: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],

          desc: [
            {required: true, message: '请填写活动形式', trigger: 'blur'}
          ]
        }
      }

    },
//富文本
    mounted() {
      // wangeditor
      this.phoneEditor = new E('#websiteEditorElem');
      this.phoneEditor1 = new E('#websiteEditorElem1');
      // this.phoneEditor.onchange = function () {
      //   this.formData.phone = this.$txt.html()
      // }
      // 上传图片到服务器，base64形式
      this.phoneEditor.customConfig.uploadImgShowBase64 = true
      // 隐藏网络图片
      this.phoneEditor.customConfig.showLinkImg = false
      // 创建一个富文本编辑器
      this.phoneEditor.create()
      // 富文本内容
      this.phoneEditor.txt.html()


      // 上传图片到服务器，base64形式
      this.phoneEditor1.customConfig.uploadImgShowBase64 = true
      // 隐藏网络图片
      this.phoneEditor1.customConfig.showLinkImg = false
      // 创建一个富文本编辑器
      this.phoneEditor1.create()
      // 富文本内容
      this.phoneEditor1.txt.html()
    },


    methods: {
      renderHeader() {
        return (
          < div >
          < el-button > 删除选中 < /el-button>
          < /div>
      )
      },
      allSec() {
        return (
          < div > < span > 全选 < /span> </
        div >
      )
      },
    }
  }
</script>

<style scoped>
  /*  房屋出租*/
  .myCenter {
    width: 1200px;
    /*border: 1px solid #000;*/
    margin: 0 auto;
  }
  .myCenter .tabItem{
    text-align: left;
  }
  .myCenter .tabItem .Advertisement {
    width: 100%;
    height: 200px;
    background-color: #fff;

  }

  .myCenter .tabItem .Advertisement .steps {
    margin-top: 30px;
  }

  .myCenter .tabItem .propertyUse {
    /*border: 1px solid #000;*/
    margin-top: 30px;
    height: 100px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
  }

  .myCenter .tabItem .propertyUse div {
    /*border: 1px solid #000;*/
    width: 30%;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-size: 20px;
    color: #999999;
    cursor: pointer;
  }

  .myCenter .tabItem .propertyUse div:hover {
    border-bottom: 2px solid #ad2022;
    color: #333333;
  }

  .myCenter .tabItem .propertyUseItem {
    border-left: 5px solid #ad2022;
    margin-top: 30px;
    border-radius: 5px;
    padding-left: 15px;
  }

  .myCenter .tabItem .propertyUseItem span {
    font-size: 20px;
    font-weight: bold;
  }

  /*  单位资料*/
  .myCenter .tabItem .unitData {
    width: 80%;
    height: 60px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;

  }

  .myCenter .tabItem .unitData .inpItemOne {
    width: 100px;
    height: 20px;
    border: 1px solid #ff0000;
    background-color: #ffdbdb;
    line-height: 20px;
    padding: 5px;
  }

  .myCenter .tabItem .unitData .inpItemOne input {
    width: 80px;
    height: 20px;
    border: none;
    margin-left: 5px;
    background-color: #ffdbdb;
  }

  .myCenter .tabItem .unitData .inpItemTwo {
    border: 1px solid #cccccc;
    background-color: #fff;
    padding: 5px;
  }

  .myCenter .tabItem .unitData .inpItemTwo input {
    background-color: #fff;
  }

  .myCenter .tabItem .unitData .inpItemThree {
    border: none;
    background-color: #f5f5f5;
    padding: 5px;
  }

  .myCenter .tabItem .unitData .inpItemFour {
    width: 160px;
    padding: 5px;
  }

  .myCenter .tabItem .Label span {
    margin-right: 15px;
  }

  .myCenter .tabItem .Label .Labelitem {
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
  }

  /* 租賃信息 */
  .myCenter .tabItem .leasingInformation {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding-bottom: 30px;
  }

  .myCenter .tabItem .leasingInformation {

    padding-top: 1px;
    padding-left: 15px;
  }

  .myCenter .tabItem .leasingInformation .propertyUseItem {
    border-left: 5px solid #ad2022;
    border-radius: 5px;
  }

  .myCenter .tabItem .leasingInformation .inputItem {
    margin-top: 30px;
  }

  .myCenter .tabItem .leasingInformation .inputItem .inpItemOne {
    width: 95%;
    height: 50px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg {
    width: 80%;
    height: 200px;
    border: 1px solid #999999;
    float: right;
    margin-right: 120px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
    padding: 15px;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg .btn {
    color: #FFFFFF;
    background-color: #ad2022;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg .uploadImgItemTwo {
    display: flex;
    flex-flow: row;
    flex-direction: row;
    justify-content: space-between;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg .uploadImgItemThree {
    display: flex;
    flex-flow: column;
    flex-flow: column;
    justify-content: flex-end;
  }

  /* 联络资料 */
  .ContactInformation {
    height: 466px;
    border: 1px solid #fff;
    margin-top: 30px;
    background-color: #fff;
  }

  .ContactInformation .userInfos {
    /*border: 1px solid #000;*/
    height: 250px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
  }

  .ContactInformation .userInfos .Infobox {
    border: 4px dashed #cccccc;
    width: 40%;
    display: flex;
    justify-content: flex-start;
    flex-flow: row;
    flex-direction: row;
    padding: 30px;
  }

  .bottomFooter {
    height: 150px;
    /*border: 1px solid #000;*/
    margin-top: 30px;
  }

  .bottomFooter .footerBtn {
    background-color: #ad2022;
    width: 200px;
    color: #FFFFFF;
    font-weight: bold;
  }
</style>
